<!-- components/FormInputLogin.vue -->
<template>
  <view class="input-container">
    <!-- 图标区域 - 放大2倍 -->
    <view class="icon-wrapper">
      <image :src="inputIcon" class="input-icon" :class="{ focused }" mode="aspectFit"></image>
    </view>
    
    <!-- 输入区域 -->
    <view class="input-field">
      <!-- 普通文本输入框 -->
      <input 
        v-if="type === 'text' || (type === 'password' && showPassword)"
        :value="inputValue"
        :placeholder="placeholder"
        placeholder-class="placeholder-style"
        class="form-input"
        type="text"
        :maxlength="maxlength"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
      />
      
      <!-- 密码输入框 -->
      <input 
        v-if="type === 'password' && !showPassword"
        :value="inputValue"
        :placeholder="placeholder"
        placeholder-class="placeholder-style"
        class="form-input"
        type="password"
        :maxlength="maxlength"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        password
      />
      
      <!-- 密码可见性切换 - 放大1.2倍 -->
      <view v-if="type === 'password'" class="toggle-password" @tap="togglePassword">
        <image :src="eyeIcon" class="eye-icon" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 底部边框 -->
    <view class="input-border" :class="{ focused }"></view>
  </view>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    type: {
      type: String,
      default: 'text'
    },
    required: {
      type: Boolean,
      default: false
    },
    maxlength: {
      type: [Number, String],
      default: 140
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      focused: false,
      showPassword: false
    };
  },
  computed: {
    inputValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    },
    // 根据输入类型返回对应的图标
    inputIcon() {
      if (this.type === 'password') {
        return '/static/lock_icon.png'
      }
      return '/static/user_icon.png'
    },
    // 眼睛图标
    eyeIcon() {
      return this.showPassword ? '/static/eye_open.png' : '/static/eye_close.png'
    }
  },
  methods: {
    handleInput(e) {
      this.$emit('update:modelValue', e.detail.value)
    },
    togglePassword() {
      this.showPassword = !this.showPassword;
    },
    handleFocus() {
      this.focused = true;
    },
    handleBlur() {
      this.focused = false;
    }
  }
}
</script>

<style scoped lang="scss">
.input-container {
  position: relative;
  margin-bottom: 60rpx; /* 增加间距 */
}

.icon-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100rpx; /* 放大容器以适应更大的图标 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  
  .input-icon {
    width: 80rpx; /* 40 * 2 = 80 */
    height: 80rpx; /* 40 * 2 = 80 */
    opacity: 0.7;
    transition: all 0.3s;
    
    &.focused {
      opacity: 1;
      filter: invert(46%) sepia(93%) saturate(1528%) hue-rotate(192deg) brightness(100%) contrast(103%);
    }
  }
}

.input-field {
  position: relative;
  padding-left: 100rpx; /* 与图标容器宽度一致 */
}

.form-input {
  height: 100rpx; /* 增大高度以适应更大的图标 */
  font-size: 34rpx; /* 稍大字体 */
  color: #333;
  padding: 0 100rpx 0 0; /* 调整内边距 */
  border: none;
  background: transparent;
  width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center; /* 垂直居中文本 */
}

.placeholder-style {
  color: #aaa;
  font-size: 32rpx; /* 稍大字体 */
}

.toggle-password {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 60rpx; /* 50 * 1.2 = 60 */
  height: 60rpx; /* 50 * 1.2 = 60 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  
  .eye-icon {
    width: 43.2rpx; /* 36 * 1.2 = 43.2 */
    height: 43.2rpx; /* 36 * 1.2 = 43.2 */
    opacity: 0.6;
    transition: all 0.3s;
  }
  
  &:active .eye-icon {
    opacity: 1;
    transform: scale(1.1);
  }
}

.input-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rpx;
  background: #e0e0e0;
  transition: all 0.3s;
  
  &.focused {
    height: 4rpx;
    background: #0081ff;
  }
}
</style>